<template>
  <view class="welfare-module pa-16">
    <view class="welfare-module_title mb-16">
      <view class="title-line"></view>
      <text class="px-4">专享福利</text>
      <view class="title-line" style="transform: rotate(180deg)"></view>
    </view>
    <view class="goods-list mb-16">
      <template v-for="v in list" :key="v.productLibId">
        <view class="goods-item br-8" @click="toDetail(v.productLibId)">
          <TImage :src="v.imageUrl" width="200rpx" height="200rpx" />
          <!-- <view class="goods-price text-overflow-1">
            <text>{{ formatMoney({ money: v.minPrice, showFreeText: true }) }}</text>
          </view> -->
          <Price
            _class="text-overflow-1"
            _-style="position: absolute;left: 0; bottom: 0;color: #fff;font-size: 28rpx; width: 100%; text-align: center;
             background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);"
            :min-price="v.minPrice"
            :max-price="v.minPrice"
            :price-show-type="v.priceShowType"
          ></Price>
        </view>
      </template>
    </view>
    <view class="moreBox flexCenter fz-14" @click="toViewMore">
      <view class="pb-1">更多</view>
      <text class="ali-icon fz-24">&#xe6c7;</text>
    </view>
  </view>
</template>

<script setup lang="ts">
  import TImage from '@/components/TImage/index.vue';
  import type { PropType } from 'vue';
  import type { HomeDataResult } from '@/api/home/types';
  import { formatMoney } from '@/utils/number';
  import { navigateTo } from '@/router';
  import { toHuibangCloud } from '@/utils/dynamicConfig';
  import Price from '@/components/Price/index.vue';

  defineProps({
    list: Array as PropType<HomeDataResult['memberBenefitsInfo']>,
  });

  function toViewMore() {
    navigateTo({
      name: 'memberWelfareCenter',
    });
  }

  function toDetail(productLibId: number) {
    // 跳转商城的商品详情
    toHuibangCloud('goodsDetail', { goodsId: productLibId });
  }
</script>

<style lang="scss" scoped>
  .welfare-module {
    border-radius: 16rpx;
    border: 1px solid #fbe6ba;
    background: linear-gradient(112deg, #fdedc7 0%, #f7d9a2 99.98%);
    &_title {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ca7b1b;
      font-size: 36rpx;
      .title-line {
        width: 48rpx;
        height: 4rpx;
        background: linear-gradient(270deg, #ca7b1b 0%, rgba(202, 123, 27, 0) 100%);
      }
    }
    .goods-list {
      height: 200rpx;
      display: flex;
      align-items: center;
      gap: 24rpx;
      .goods-item {
        width: 200rpx;
        height: 200rpx;
        position: relative;
        overflow: hidden;
      }
    }
    .moreBox {
      color: #a86d25;
      display: flex;
      align-items: center;
    }

    .flexCenter {
      justify-content: center;
    }
  }
</style>
